<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="filterForm.name"
        class="input-with-select"
        placeholder="请输入内容"
        @keyup.enter.native="handleSearch"
      >
        <el-select
          slot="prepend"
          v-model="select"
          style="width: 128px"
          placeholder="请选择"
        >
          <el-option label="帖子标题" value="1" />
          <!-- <el-option label="帖子代码" value="2"></el-option>
          <el-option label="帖子描述" value="3"></el-option>
          <el-option label="备注" value="4"></el-option> -->
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
      </el-input>
      <el-input
        v-model="filterForm.size"
        type="number"
        placeholder="请输入每页显示条数"
        @keyup.enter.native="handleSearch"
      >
        <template slot="prepend">每页数量</template>
      </el-input>
    </div>
    <!-- 搜索栏end -->
    <!-- 操作按钮 -->
    <div style="margin-top: 20px">
      <el-button type="primary" @click="handleAdd">添加</el-button>
      <el-button
        v-show="selectedIds.length > 0"
        type="danger"
        @click="handleDelete()"
        >批量删除</el-button
      >
    </div>
    <!-- 操作按钮end -->
    <!-- 表单 -->
    <el-form>
      <el-table
        style="width: 100%; margin: 20px"
        :data="tableData"
        @select-all="handleSelectAll"
        @select="handleSelect"
      >
        <el-table-column fixed type="selection" width="55" />
        <el-table-column prop="title" label="文章标题" />
        <el-table-column prop="content" label="文章内容" />
        <el-table-column prop="userId" label="用户" />
        <el-table-column prop="checkId" label="审核状态" />
        <el-table-column prop="checkId" label="审核状态">
          <template slot-scope="scope">
            <el-tag :type="checkTagType(scope.row.checkId)">{{
              checkName(scope.row.checkId)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="stateId" label="状态类型">
          <template slot-scope="scope">
            <el-tag :type="stateTagType(scope.row.stateId)">{{
              stateName(scope.row.stateId)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="viewNumber" label="浏览数量" />
        <el-table-column prop="likeNumber" label="点赞数量" />
        <el-table-column prop="commentNumber" label="评论数量" />
        <el-table-column prop="collectNumber" label="收藏数量" />
        <el-table-column prop="createdDate" label="创建时间" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- 表单end -->
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="parseInt(page.size)"
      :page-count="parseInt(page.count)"
      :total="page.total"
      @current-change="handleCurrentChange"
    />
    <!-- 分页end -->
    <!-- 编辑帖子弹窗 -->
    <el-dialog
      :title="editArticleForm.formTitle"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form ref="editArticleForm" :model="editArticleForm" :rules="rules">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="editArticleForm.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <el-input v-model="editArticleForm.content" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户" prop="userId">
          <el-input v-model="editArticleForm.userId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="审核状态" prop="checkId" v-if="editArticleForm.handle == 'edit'">
          <el-input v-model="editArticleForm.checkId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态类型" prop="stateId">
          <el-input v-model="editArticleForm.stateId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editArticleForm.remark" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('editArticleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑帖子弹窗end -->
  </div>
</template>

<script>
import {
  getArticleList,
  addArticle,
  deleteArticle,
  updateArticle,
} from "@/api/article";
import { getStateList } from "@/api/stateType";
import { getCheckTypeList } from "@/api/checkType";
export default {
  data() {
    return {
      // 搜索多选索引
      select: "1",
      // 多选数据的Ids
      selectedIds: [],
      // 搜索框数据
      filterForm: {
        page: 1,
        size: 10,
        name: "",
      },
      // 分页数据
      page: {
        count: 1,
        size: 10,
        total: 0,
      },
      // 表单数据
      tableData: [],
      // 添加帖子数据(默认)，用于覆盖
      addArticleForm: {
        id: 0,
        title: "",
        content: "",
        userId: "",
        checkId: "",
        stateId: "",
        remark: "",
        handle: "add",
        formTitle: "添加帖子",
      },
      // 编辑帖子数据
      editArticleForm: {
        id: 0,
        title: "",
        content: "",
        userId: "",
        checkId: "",
        stateId: "",
        remark: "",
        handle: "edit",
        formTitle: "编辑帖子",
      },
      // 添加/编辑表单显示
      dialogFormVisible: false,
      // 表达验证
      rules: {
        title: {
          required: true,
          message: "请输入帖子名称",
          trigger: "blur",
        },
        content: {
          required: true,
          message: "请输入帖子代码",
          trigger: "blur",
        },
        userId: {
          required: true,
          message: "请输入用户Id",
          trigger: "blur",
        },
      },
      //审核列表
      checkList:[],
      //状态列表
      stateList: []
    };
  },
  created() {
    this.getStateList();
    this.getCheckTypeList();
    this.handleSearch();
  },
  methods: {
    handleSearch() {
      this.filterForm.page = 1;
      this.getArticleList();
    },
    handleAdd() {
      this.editArticleForm = Object.assign({}, this.addArticleForm);
      this.handleDialog();
    },
    handleDelete(param) {
      if (param === undefined) {
        const articleIds = this.selectedIds;
        if (articleIds.length === 0) {
          this.$message({
            type: "error",
            message: "请选择要删除的帖子",
          });
        } else {
          this.handleDeleteConfirm()
            .then(() => {
              this.deleteArticle({ articleIds });
            })
            .catch(() => {});
        }
      } else {
        this.handleDeleteConfirm()
          .then(() => {
            this.deleteArticle(param);
          })
          .catch(() => {});
      }
    },
    handleSelectAll(selection) {
      this.selectedIds = selection.map((item) => item.id);
      console.log(this.selectedIds);
    },
    handleSelect(selection) {
      this.selectedIds = selection.map((item) => item.id);
      console.log(this.selectedIds);
    },
    handleEdit(row) {
      this.editArticleForm = Object.assign({}, row);
      this.editArticleForm.handle = "edit";
      this.editArticleForm.formTitle = "编辑帖子";
      this.handleDialog();
    },
    handleCurrentChange(val) {
      this.filterForm.page = val;
      this.getArticleList();
    },
    handleDialog() {
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    handleDeleteConfirm() {
      return this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editArticleForm.handle === "add") {
            this.addArticle();
          } else if (this.editArticleForm.handle === "edit") {
            this.updateArticle();
          }
        } else {
          this.$message.error("错误的提交");
        }
      });
    },
    // id转审核类型
    checkTagType(id) {
      if (this.checkList.length > 0) {
        const item = this.checkList.find(
          (item) =>
            item.id == id &&
            (item.checkName === "未审核" || item.checkName === "审核未通过")
        );
        return item ? "danger" : "success";
      }
      return "";
    },
    // Id转状态名称
    checkName(id) {
      if (this.checkList.length > 0) {
        let item = this.checkList.find((item) => item.id === id);
        return item ? item.checkName : "";
      }
      return "";
    },
    // id转状态类型
    stateTagType(id) {
      if (this.stateList.length > 0) {
        const item = this.stateList.find(
          (item) =>
            item.id == id &&
            (item.stateName === "封禁" || item.stateName === "注销")
        );
        return item ? "danger" : "success";
      }
      return "";
    },
    // Id转状态名称
    stateName(id) {
      if (this.stateList.length > 0) {
        let item = this.stateList.find((item) => item.id === id);
        return item ? item.stateName : "";
      }
      return "";
    },
    getCheckTypeList(){
      let param = { page: 1, size: 99, name: "" };
      getCheckTypeList(param).then((result) => {
        if (result.code === 200) {
          this.checkList = result.data.list.map((item) => ({
            id: item.id,
            checkName: item.checkName,
          }));
          console.log("checkType:", this.checkList);
        }
      });
    },
    getStateList() {
      let param = { page: 1, size: 99, name: "" };
      getStateList(param).then((result) => {
        if (result.code === 200) {
          this.stateList = result.data.list.map((item) => ({
            id: item.id,
            stateName: item.stateName,
          }));
          console.log("state:", this.stateList);
        }
      });
    },
    getArticleList() {
      if (this.filterForm.size === "") {
        this.$message({
          type: "error",
          message: "请输入每页显示条数",
        });
      } else {
        getArticleList(this.filterForm)
          .then((result) => {
            if (result.code === 200) {
              console.log(result);
              this.tableData = result.data.list;
              this.page.size = this.filterForm.size;
              this.page.count = result.data.total / this.filterForm.size;
              this.page.total = result.data.total;
            }
          })
          .catch(() => {});
      }
    },
    addArticle() {
      console.log(this.editArticleForm);
      addArticle(this.editArticleForm)
        .then((result) => {
          if (result.code === 200) {
            this.$message.success(result.message);
            this.filterForm.name = "";
            this.filterForm.size = 10;
            this.dialogFormVisible = false;
            this.getArticleList();
          }
        })
        .catch(() => {});
    },
    deleteArticle(param) {
      deleteArticle(param)
        .then((result) => {
          if (result.code === 200) {
            this.$message.success(result.message);
            this.dialogFormVisible = false;
            if (param.articleIds) {
              this.selectedIds = [];
            }
            this.getArticleList();
          }
        })
        .catch(() => {});
    },
    updateArticle() {
      updateArticle(this.editArticleForm)
        .then((result) => {
          if (result.code === 200) {
            this.$message.success(result.message);
            this.dialogFormVisible = false;
            this.handleSearch();
          }
        })
        .catch(() => {});
    },
    
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .search-bar {
    display: flex;
    margin-top: 15px;
    .input-with-select {
      margin-right: 20px;
    }
  }
}
</style>
